﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Site.Master" AutoEventWireup="true" CodeBehind="Detail.aspx.cs" Inherits="KMT.Pages.Product.Detail" %>
<%@ Register src="../../Controls/Product/ProductDetail.ascx" tagname="ProductDetail" tagprefix="UC" %>
<%@ Register src="../../Controls/Product/TabsContentDetail.ascx" tagname="TabsContentDetail" tagprefix="UC" %>
<%@ Register src="../../Controls/Product/RelatedProduct.ascx" tagname="RelatedProduct" tagprefix="UC" %>
<%@ Register src="../../Controls/Product/TabsComment.ascx" tagname="TabsComment" tagprefix="UC" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphMain" runat="server">
    <style type="text/css">
        .product-view .product-img-box .more-views { width: 344px; }
        #zoom-window { left: 415px; width: 536px; }
    </style>

    <div class="main-container col1-layout">
        <div class="main">
            <div class="col-main">                
                <UC:ProductDetail ID="ProductDetail" runat="server" />
            </div>                                    
        </div>
    </div>

    <div class="product-collateral">
        <ul class="product-tabs">
            <li id="product_tabs_description" class=" active first">
                <div class="tab-left">
                </div>
                <a href="#">Thông tin chi tiết sản phẩm</a><div class="tab-right">
                </div>
            </li>            
            <li id="product_tabs_product_review" class="">
                <div class="tab-left">
                </div>
                <a href="#">Bình luận</a><div class="tab-right">
                </div>
            </li>            
        </ul>

        <UC:TabsContentDetail ID="TabsContentDetail" runat="server" />
                        
        <UC:TabsComment ID="TabsComment" runat="server" />

    </div>                        
                           
    <UC:RelatedProduct ID="RelatedProduct" runat="server" />

    <script src="http://malsup.github.com/jquery.form.js" type="text/javascript"></script>

    <script type="text/javascript">
        // Start easyZoom
        jQuery('#zoom')
    		.easyZoom({
    		    parent: 'div.zoom-container',
    		    preload: '',
    		    lightboxBtn: '.lightbox-btn .lightbox'
    		})
    		.data('easyZoom')
    		.gallery('a.zoom-thumbnail');


        jQuery('.more-views').iosSlider({
            desktopClickDrag: true,
            snapToChildren: true,
            infiniteSlider: false,
            navNextSelector: '.more-views-arrow.next',
            navPrevSelector: '.more-views-arrow.prev'
        });

        // Start lightbox
        jQuery('a.lightbox').lightBox({
            imageLoading: 'skin/frontend/default/blanco/images/lightbox-ico-loading.gif',
            imageBtnClose: 'skin/frontend/default/blanco/images/lightbox-btn-close.gif',
            imageBtnNext: 'skin/frontend/default/blanco/images/lightbox-btn-next.gif',
            imageBtnPrev: 'skin/frontend/default/blanco/images/lightbox-btn-prev.gif',
            imageBlank: 'skin/frontend/default/blanco/images/lightbox-blank.gif',
            fixedNavigation: true
        });        
        
        var productAddToCartForm = new VarienForm('product_addtocart_form');
        var url = jQuery('#product_addtocart_form').attr('action');
        url = url.replace("checkout/cart", "ajax/index");

        var msgHtml;
        var productImg = jQuery('.main-thumbnail').html();
        var windowOver = jQuery('#addedoverlay');
        var windowBox = jQuery('#added');
        var titleForBox = jQuery('#productname').text();
        var data = { 'isAjax': 1 }

        jQuery('#product_addtocart_form').ajaxForm({
            url: url,
            data: data,
            dataType: 'json',
            beforeSubmit: function () {
                if (productAddToCartForm.validator.validate()) {
                    windowOver.show();
                    windowBox.show().css({
                        backgroundImage: "url('skin/frontend/default/blanco/images/loading.gif')"
                    });
                } else {
                    return false;
                }
            },
            error: function (data) {
                windowBox.css({
                    backgroundImage: 'none'
                }).html('Error');
                windowOver.one('click', function () {
                    hidewindow(windowBox, windowOver);
                });

                jQuery('#hidewindow').click(function () {
                    hidewindow(windowBox, windowOver);
                });
            },
            success: function (data, statusText, xhr) {
                if (data.status == 'SUCCESS') {
                    if (jQuery('.block-cart')) {
                        jQuery('.block-cart').replaceWith(data.sidebar);
                    }
                    if (jQuery('.header .block-cart-header')) {
                        jQuery('.header .block-cart-header').replaceWith(data.topcart);
                    }
                    msgHtml = '<div class="added-content"><div style="float:left;">' + productImg + '</div><em>' + titleForBox + '</em> was successfully added to your shopping cart.<div style="clear:both;"></div><a id="hidewindow" href="javascript:void(0);">Continue shopping</a>&nbsp;<a href="http://8theme.com/demo/blanco/checkout/cart/">View cart & checkout</a></div>';
                } else {
                    msgHtml = '<div class="added-content"><p class="error-msg" style="margin-bottom:15px;">' + data.message + '</p><a id="hidewindow" href="javascript:void(0);">Continue shopping</a>&nbsp;<a href="http://8theme.com/demo/blanco/checkout/cart/">View cart & checkout</a></div>';
                }

                windowBox.css({
                    backgroundImage: 'none'
                }).html(msgHtml);
                windowOver.one('click', function () {
                    hidewindow(windowBox, windowOver);
                });

                jQuery('#hidewindow').click(function () {
                    hidewindow(windowBox, windowOver);
                });
            }
        });

        function hidewindow(windowBox, windowOver) {
            windowOver.fadeOut(400);
            windowBox.fadeOut(400).html('');
        }
        
        var qty_el = document.getElementById('qty');
        var qty = qty_el.value;
        if (qty < 2) {
            jQuery('.quantity_box_button_down').css({
                'visibility': 'hidden'
            });
        }
        function qtyDown() {
            var qty_el = document.getElementById('qty');
            var qty = qty_el.value;
            if (qty == 2) {
                jQuery('.quantity_box_button_down').css({
                    'visibility': 'hidden'
                });
            }
            if (!isNaN(qty) && qty > 0) {
                qty_el.value--;
            }
            return false;
        }

        function qtyUp() {
            var qty_el = document.getElementById('qty');
            var qty = qty_el.value;
            if (!isNaN(qty)) {
                qty_el.value++;
            }
            jQuery('.quantity_box_button_down').css({
                'visibility': 'visible'
            });
            return false;
        }

        var lifetime = 3600;
        var expireAt = Mage.Cookies.expires;
        if (lifetime > 0) {
            expireAt = new Date();
            expireAt.setTime(expireAt.getTime() + lifetime * 1000);
        }
        Mage.Cookies.set('external_no_cache', 1, expireAt);
    </script>

    <script type="text/javascript">
        Varien.Tabs = Class.create();
        Varien.Tabs.prototype = {
            initialize: function (selector) {
                var self = this;
                $$(selector + ' a').each(this.initTab.bind(this));
            },

            initTab: function (el) {
                el.href = 'javascript:void(0)';
                if ($(el.parentNode).hasClassName('active')) {
                    this.showContent(el);
                }
                el.observe('click', this.showContent.bind(this, el));
            },

            showContent: function (a) {
                var li = $(a.parentNode), ul = $(li.parentNode);
                ul.select('li', 'ol').each(function (el) {
                    var contents = $(el.id + '_contents');
                    if (el == li) {
                        el.addClassName('active');
                        contents.show();
                    } else {
                        el.removeClassName('active');
                        contents.hide();
                    }
                });
            }
        }
        new Varien.Tabs('.product-tabs');
    </script>

</asp:Content>
